<div id="chronomancer-top-bar">
    <img src="assets/images/logo.png" class="chronomancer-logo">
    <div class="chronomancer-top-bar-right">
        <div class="dropdown chronomancer-top-bar-version">
            <button class="btn long-dropdown" type="button" data-toggle="dropdown">
            Version: {{version.name}}
            </button>
            <div class="dropdown-menu">
            <button *ngFor="let v of versions" class="dropdown-item btn long-button" type="button" (click)="setVersion(v)">{{v.name}}</button>
            </div>
        </div>
        <div class="dropdown chronomancer-top-bar-options">
            <button class="btn long-dropdown" type="button" data-toggle="dropdown">
            Options...
            </button>
            <div class="dropdown-menu">
                <button class="dropdown-item btn long-button" type="button" (click)="importFromSave(fileInput)">Import From Save File</button>
                <button class="dropdown-item btn long-button" type="button" (click)="importBuild()">Import Build Code</button>
                <button class="dropdown-item btn long-button" type="button" (click)="exportBuild()">Export Build Code</button>
                <button class="dropdown-item btn long-button" type="button" (click)="linkBuild()">Get Link to Build</button>
                <button class="dropdown-item btn long-button" type="button" (click)="resetCharacter()">Reset Character</button>
                <button class="dropdown-item btn long-button" type="button" (click)="showChangelogDialog()">Changelog...</button>
                <button class="dropdown-item btn long-button" type="button" (click)="showAboutDialog()">About...</button>
            </div>
        </div>
    </div>
</div>

<div id="chronomancer" class="bordered">
    <div *ngIf="character == null">
        <h1>Select your class!</h1>
        <div id="chronomancer-chars">
            <div *ngFor="let charClass of version.classes">
                <char-sel [charClass]="charClass"></char-sel>
            </div>
        </div>
    </div>

    <div *ngIf="character != null" id="chronomancer-top-pane">
        <div id="items-pane" class="bordered" [style.border-image]="'url(\'assets/images/border/' + borderName + '.png\') 22 round'">
            <span id="items-rune-count-pane">
                <div id="equip-slots">
                    <div> <equip-slot [slot]="ITEM_TYPE_HEAD"></equip-slot> <equip-slot [slot]="ITEM_TYPE_ACCESSORY"></equip-slot> </div>
                    <div> <equip-slot [slot]="ITEM_TYPE_AMULET"></equip-slot> <equip-slot [slot]="ITEM_TYPE_OFFHAND"></equip-slot> </div>
                    <div> <equip-slot [slot]="ITEM_TYPE_BODY"></equip-slot> <equip-slot [slot]="ITEM_TYPE_WEAPON"></equip-slot> </div>
                    <div> <equip-slot [slot]="ITEM_TYPE_FEET"></equip-slot> <equip-slot [slot]="ITEM_TYPE_RING"></equip-slot> </div>
                </div>
                <div class="greater-rune-count">
                    {{character.greaterRunes}}/{{character.maxGreaterRunes}} <img src="assets/images/greater_rune.png">
                </div>
            </span>
            <item-editor></item-editor>
        </div>
        <div class="character-model-pane">
            <img id="character-model" src="assets/images/model/{{character.charClass.id}}.png">
            <div>{{character.charClass.name}}</div>
            <div>
                Level <input type="number" class="text-input" min="{{minLevel}}" max="100" [value]="character.level" #levelSpinner (change)="onSetLevel(levelSpinner)" (focusout)="onSetLevel(levelSpinner)">
            </div>
        </div>
        <div id="skills-pane" class="bordered" [style.border-image]="'url(\'assets/images/border/' + borderName + '.png\') 22 round'">
            <div class="skills-pane-top-bar">
                <span class="skill-points-display">{{skillPointsDisplay}}</span>
                <span class="respec-button btn short-button" (click)="respeccing = !respeccing">Mode: {{respeccing ? 'Respec' : 'Spec'}}</span>
            </div>
            <span *ngFor="let treeName of character.charClass.skillTrees; let tree = index">
                <skill-tree-tab [tree]="tree"></skill-tree-tab>
            </span>
            <skill-tree></skill-tree>
        </div>
    </div>
</div>

<equip-dialog></equip-dialog>
<skill-dialog></skill-dialog>
<socket-config-dialog></socket-config-dialog>
<gem-dialog></gem-dialog>
<enchant-select-dialog></enchant-select-dialog>
<enchant-edit-dialog></enchant-edit-dialog>
<about-dialog></about-dialog>
<changelog-dialog></changelog-dialog>
<export-dialog></export-dialog>
<import-dialog></import-dialog>
<reset-dialog></reset-dialog>

<item-tooltip></item-tooltip>
<enchant-tooltip></enchant-tooltip>
<skill-tooltip></skill-tooltip>
<gem-tooltip></gem-tooltip>

<input #fileInput type="file" class="file-uploader" (change)="importFromSaveUploadFinished(fileInput)">
